import React from 'react';

const MapPositionIcon = ({ position }) => {
  const iconStyle = {
    display: 'inline-block',
    width: '16px',
    height: '16px',
    position: 'relative',
    marginRight: '8px',
    background: '#f0f0f0',
    borderRadius: '2px',
    overflow: 'hidden'
  };

  const dotStyle = {
    position: 'absolute',
    width: '4px',
    height: '4px',
    background: '#1890ff',
    borderRadius: '50%',
    transform: 'translate(-50%, -50%)'
  };

  const getDotPosition = () => {
    switch(position) {
      case 'top-left':
        return { top: '25%', left: '25%' };
      case 'top-center':
        return { top: '25%', left: '50%' };
      case 'top-right':
        return { top: '25%', left: '75%' };
      case 'bottom-left':
        return { top: '75%', left: '25%' };
      case 'bottom-center':
        return { top: '75%', left: '50%' };
      case 'bottom-right':
        return { top: '75%', left: '75%' };
      default:
        return { display: 'none' };
    }
  };

  return (
    <span style={iconStyle}>
      <span style={{ ...dotStyle, ...getDotPosition() }} />
    </span>
  );
};

export default MapPositionIcon;